@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --menu-slide-height: 4px;
  --menu-gap: 4px;
  --menu-height: calc(var(--menu-slide-height) * 3 + var(--menu-gap) * 2);
  --x-width: calc(var(--menu-height) * 1.41421356237);
}
@layer components {
  /* 直接将my-custom-style 写到类里面 */
  .my-custom-style {
    @apply underline; /*应用现有的原子类*/
  }

  /* 汉堡菜单*/
  .ham_menu {
    height: var(--menu-height);
    gap: var(--menu-gap);
  }

  .ham_menu input {
    @apply pointer-events-none;
    appearance: none;
    background-color: black;
    width: 1.5rem;
    height: var(--menu-slide-height);

    border-radius: 90px;
    transition: all ease-in-out 0.3s;
    border: 0;
  }

  .ham_menu input:checked {
    opacity: 0;
  }

  .ham_menu:has(input:checked)::before {
    rotate: 45deg;
    width: var(--x-width);

    translate: 0 calc(var(--menu-slide-height) / -2);
    background-color: white;
    transform-origin: left center;
  }

  .ham_menu:has(input:checked)::after {
    rotate: -45deg;
    background-color: white;
    width: var(--x-width);
    transition: all ease-in-out 0.3s;
    translate: 0 calc(var(--menu-slide-height) / 2);
    transform-origin: left center;
  }

  .ham_menu:has(input:checked) + .slider {
    display: flex;

    transition: all ease-in-out 0.3s;
  }
  .ham_menu::before {
    border-radius: 10px;
    display: block;
    content: '';
    transition: all ease-in-out 0.3s;
    height: var(--menu-slide-height);
    border-radius: 90px;
    background-color: black;
  }

  .ham_menu::after {
    border-radius: 10px;
    display: block;
    content: '';
    transition: all ease-in-out 0.3s;
    height: var(--menu-slide-height);
    border-radius: 90px;
    background-color: black;
  }
}
